<template>
    <div>
        <c-title text="区县代理"></c-title>
        <div class="head">
            <div class="flex">
                <img :src="info.has_one_member && info.has_one_member.avatar_image" />
                <div class="flex-column" style="text-align: left;margin-left: .5rem;">
                    <div class="name">{{ info.has_one_member && info.has_one_member.nickname }}</div>
                    <div class="adress">{{ info.area }}</div>
                    <div class="time">{{ info.created_at }}</div>
                </div>
            </div>
            <div class="line"></div>
            <div class="flex-j-sa">
                <div class="flex-column">
                    <div class="merchant_count">{{ info.merchant_count}}</div>
                    <div class="tips">招商员数量</div>
                </div>
                <div class="flex-column">
                    <div class="merchant_count">{{ info.store_count  }}</div>
                    <div class="tips">招募商家数量</div>
                </div>
            </div>
        </div>
        <van-tabs v-model="active" line-width=".9375rem" line-height=".125rem" @click="tab_handle">
            <van-tab title="招商员列表"></van-tab>
            <van-tab title="商家列表"></van-tab>
        </van-tabs>
        <div class="list">
            <template v-if="active == 0">
                <div class="account-manager" v-for="item in list" :key="item.id"
                    @click="link('finger_shopping_merchants_details', item)">
                    <img :src="item.has_one_member && item.has_one_member.avatar_image" alt="">
                    <div class="account-manager-right">
                        <div style="flex:1;">
                            <div class="flex-j-sb flex-a-c lh-1" style="margin-bottom: .4375rem;padding-top: .3125rem;">
                                <div class="name" style="margin: 0;">
                                    {{ item.has_one_member && item.has_one_member.nickname }}</div>
                                <div class="count">{{ item.store_count }}
                                </div>
                            </div>
                            <div class="flex-j-sb flex-a-c lh-1" style="margin-bottom: .5rem;">
                                <div class="c-999 f-12">{{ item&&item.has_one_agent.area }}</div>
                                <div class="c-999 f-12">招募商家数量 <i class="iconfont icon-icon_more11"
                                        style="color:#999;font-size: .625rem;"></i></div>
                            </div>
                            <div class="flex-j-sb flex-a-c lh-1">
                                <div class="c-999 f-12">{{ item.created_at }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <div v-else>
                <div class="merchant-item" v-for="item in list" :key="item.id"
                    @click="link('finger_shopping_business', item)" :class="{'active-class':item.active==0}">
                    <div class="flex-a-c">
                        <div class="img-div">
                        <img :src="item.change_thumb" /></div>
                        <div style="flex:1;margin-left: .5rem;padding-top: .3125rem;">
                            <div class="flex-j-sb flex-a-c lh-1">
                                <span class="merchant-item-name">{{ item.store_name }}</span>
                                <span class="create-time">{{ item.created_at }}</span>
                            </div>
                            <div class="address"><i class="iconfont icon-dizhi1"></i>{{ item.full_address }}</div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="flex-a-c  flex-j-sb" style="margin-top: .6875rem;">
                        <div class="flex-a-c">
                            <span class="f-12">总计流水：</span>
                            <span class="f-14 bold">¥{{ item.total_amount }}</span>
                        </div>
                        <div class="flex-a-c">
                            <div class="img-small-div">
                            <img style="border-radius: 50%;margin-right: .25rem;width: 1.25rem;height: 1.25rem;"
                                :src="item.has_one_merchant && item.has_one_merchant.has_one_member.avatar_image" />

                            </div>
                            <div class="f-12">
                                {{ item.has_one_merchant &&
                                    item.has_one_merchant.has_one_member.nickname }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { scrollMixin } from '@/utils/mixin.js';
export default {
    mixins: [scrollMixin],
    data() {
        return {
            current_page: 1,
            last_page: 1,
            active: 0,
            list: [],
            isLoadMore: true,
            info: {}
        };
    },
    activated() {
        console.log(this.$route.tab,'this.$route.tab===');
        if(this.$route.params.tab&&this.$route.params.tab=='1'){
            this.active=1
        }else{
            this.active = 0
        }
        this.info = JSON.parse(localStorage.getItem('finger_shopping_agency_data'));
        this.getData();

    },

    methods: {
        tab_handle() {
            this.list = [];
            this.getData();
        },
        getMoreData() {
            this.isLoadMore = false;  // 防止多次请求分页数据
            if (this.current_page >= this.last_page) {
                return;
            } else {
                let page = this.current_page + 1;
                this.getData(page);
            }

        },
        getData(page = 1) {
            let url = 'plugin.zhixianggou.api.agent.merchant-list';
            if (this.active == 1) {
                url = 'plugin.zhixianggou.api.agent.store-list';
            }
            $http.post(url, { agent_id: this.$route.params.id, page }, '.').then(res => {
                if (res.result) {
                    this.current_page = res.data.current_page;
                    this.last_page = res.data.last_page;
                    this.list = page == 1 ? res.data.data : this.list.concat(res.data.data);
                } else {
                    this.$toast(res.msg);
                }
            })

        },
        link(url, item) {
   
            if (url == 'finger_shopping_merchants_details') {
                localStorage.setItem('merchants_details_data', JSON.stringify(item))
                this.$router.push(this.fun.getUrl(url, { id: item.id }));
            } else {
                if(item.active==0)return;
                localStorage.setItem('agent_store_data', JSON.stringify(item))
                this.$router.push(this.fun.getUrl(url, { store_id: item.id }));
            }

        }
    }
};
</script>

<style scoped lang='scss'>
::v-deep .van-tabs__line {
    bottom: 24px;
    background-color: var(--themeBaseColor);
}
::v-deep .van-tab--active {
  color: var(--themeBaseColor);
}


.active-class{
    img{
        display: block;
    }
    .img-small-div{
        position: relative;
        &::after{
            position: absolute;
            content:'';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color:#fff;
            opacity: .6;border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
            z-index: 10;
        }
    }
    .img-div{
        position: relative;
        &::after{
            position: absolute;
            content:'';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color:#fff;
            opacity: .6;border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
            z-index: 10;
        }
    }
    .merchant-item-btn{
        border:1px solid #D6D6DC !important;
    }
    div{
        color:#999999 !important;
    }
    span{
        color:#999999 !important;
    }
}
::v-deep .van-tabs__nav {
    background-color: transparent
}

.tips {
    color: #999999;
    font-weight: 400;
    font-size: .75rem;
}

.merchant_count {
    font-size: .9375rem;
    font-weight: bold;
    color: #00001C;
}

.list {
    padding: 0 .75rem;
}

.lh-1 {
    line-height: 1;
}

.bold {
    font-weight: bold;
}


.merchant-item {
    padding: .75rem .75rem .9375rem;
    border-radius: .5rem;
    background-color: #fff;
    margin-bottom: .625rem;
    cursor: pointer;

    .merchant-item-name {
        font-weight: bold;
        font-size: .9375rem;
        color: #00001C;


    }

    .create-time {
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
        line-height: 1;
    }

    .icon-dizhi1 {
        font-size: .625rem;
        margin-right: .1563rem;
    }

    .address {
        font-weight: normal;
        font-size: .75rem;
        color: #999999;
        margin-top: .6875rem;
        text-align: left;
    }

    img {
        width: 3rem;
        height: 3rem;
        border-radius: .625rem .625rem .625rem .625rem;
        margin: 0;
    }
}

.account-manager {
    padding: .75rem;
    margin: .625rem 0;
    border-radius: .5rem;
    cursor: pointer;
    display: flex;
    background-color: #fff;


    .c-999 {
        color: #999999;
    }



    .account-manager-right {
        display: flex;
        align-items: center;
        margin-left: .5rem;

    }

    .count {
        color: #00001C;
        font-weight: bold;
        font-size: .9375rem;
        line-height: 1;
        padding-right: 2.5rem;
    }

    .name {
        font-weight: bold;
        font-size: .9375rem;
        color: #00001C;
    }

    &-right {
        flex: 1;
    }

    img {
        margin: 0;
        width: 3rem;
        height: 3rem;
        border-radius: .625rem;
    }

}

.adress {
    font-weight: 400;
    font-size: .75rem;
    color: #999999;
}

.time {
    font-weight: 400;
    font-size: .75rem;
    color: #999999;
    line-height: 1;
    margin-top: .4375rem;
}

img {
    width: 3rem;
    height: 3rem;
    border-radius: .625rem;
    margin: 0;
}

.line {
    margin: .8125rem 0 .75rem;
    height: 1px;
    background-color: #F0F0F1;
}

.name {
    font-weight: bold;
    font-size: .9375rem;
    line-height: 1;
    color: #00001C;
    margin-top: .3125rem;
    margin-bottom: .375rem;
}

/** **/
.head {
    margin: .625rem .75rem;
    border-radius: .5rem;
    overflow: hidden;
    background-color: #fff;
    padding: .75rem;

}
</style>